<!--添加动画-->
<!---->
<template>
<div id="map" class="mapC"></div>
</template>

<script>
import 'ol/ol.css'
import Feature from 'ol/Feature'
import Map from 'ol/Map'
import Point from 'ol/geom/Point'
import View from 'ol/View'
import {Circle as CircleStyle, Stroke, Style} from 'ol/style'
import {Vector as VectorSource, XYZ} from 'ol/source'
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer'
import {easeOut} from 'ol/easing'
import {fromLonLat} from 'ol/proj'
import {getVectorContext} from 'ol/render'
import {unByKey} from 'ol/Observable'

export default {
  name: 'index',
  data () {
    return {
      map: null,
      vector: null,
      source: null,
      raster: null,
      start: null,
      featureD: null,
      listenerKey: null,
      duration: 3000
    }
  },
  mounted () {
    this.initMap()
    // setInterval(this.addRandomFeature, 1000)
  },
  methods: {
    initMap () {
      this.raster = new TileLayer({
        name: 'map1',
        title: 'map1',
        source: new XYZ({
          url: '/mapServe/tdt/map/{z}/{x}/{y}.png'
        }),
        visible: true
      })
      var raster2 = new TileLayer({
        name: 'mapi2',
        title: 'mapi2',
        source: new XYZ({
          url: '/mapServe/tdt/mapi/{z}/{x}/{y}.png'
        }),
        visible: true
      })
      this.map = new Map({
        layers: [this.raster, raster2],
        target: 'map',
        view: new View({
          center: [0, 0],
          zoom: 4
          // projection: 'EPSG:4326'
        })
      })
      this.source = new VectorSource({
        wrapX: false
      })
      this.vector = new VectorLayer({
        source: this.source
      })
      this.map.addLayer(this.vector)
      this.source.on('addfeature', (e) => {
        this.flash(e.feature)
      })
    },
    addRandomFeature () {
      const x = Math.random() * 360 - 180
      const y = Math.random() * 180 - 90
      const geom = new Point(fromLonLat([x, y]))
      const feature = new Feature(geom)
      this.source.addFeature(feature)
    },
    flash (feature) {
      this.featureD = feature
      this.start = new Date().getTime()
      this.listenerKey = this.raster.on('postrender', this.animate)
    },
    animate (event) {
      const vectorContext = getVectorContext(event)
      const frameState = event.frameState
      const flashGeom = this.featureD.getGeometry().clone()
      const elapsed = frameState.time - this.start
      const elapsedRatio = elapsed / this.duration
      // radius will be 5 at start and 30 at end.
      const radius = easeOut(elapsedRatio) * 25 + 5
      const opacity = easeOut(1 - elapsedRatio)

      const style = new Style({
        image: new CircleStyle({
          radius: radius,
          stroke: new Stroke({
            color: 'rgba(255, 0, 0, ' + opacity + ')',
            width: 0.25 + opacity
          })
        })
      })

      vectorContext.setStyle(style)
      vectorContext.drawGeometry(flashGeom)
      if (elapsed > this.duration) {
        unByKey(this.listenerKey)
        return
      }
      // tell OpenLayers to continue postrender animation
      this.map.render()
    }
  }
}
</script>

<style scoped>

</style>
